<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <title>04_姓名案例_计算属性简写</title>
</head>
<body>
    
    <!-- 
        简写 :相当于get() ;注意，只有在确定该计算属性不会修改的时候才使用简写。 
        
        需要注意的是：
            data中的属性直接使用属性名  例：xxx
            methods中的方法 调用需要加括号  例：xxx() 
            computed中的计算属性，也是属性，调用时不需要加阔话  例：xxxx
     -->

    <!-- 容器 -->
    <div id="root">
        姓：<input type="text" v-model="nameOne"><br>
        名：<input type="text" v-model="nameLast"><br>
        测试你好：<input type="text" value=""><br>
        姓名： <span>{{fullName}}</span> <br/>
  
    </div>

    <script type="text/javascript">
       Vue.config.productionTip=false; // 阻止 vue 在启动时生成生产提示。
       
    
       const vm = new Vue({
            el:'#root',
            data:{
                nameOne : '张',
                nameLast: '三'
            },
            computed:{
                // 计算属性完整写法
                /* fullName:{
                    get(){
                        console.log('get被调用');
                        return this.nameOne + '-' + this.nameLast;
                    },
                    set(value){
                        console.log('@',value);
                        const arr = value.split('-');
                        this.nameOne = arr[0];
                        this.nameLast = arr[1];
                    }
                }, */

                 // 简写 :相当于get() ;注意，只有在确定该计算属性不会修改的时候才使用简写。 
                 //  fullName(){}
                 fullName:function(){
                    console.log('get被调用');
                    return this.nameOne + '-' + this.nameLast;
                 }
            } 
        })
       
       
    </script>
</body>
</html>